<template>
    <div id="scroll-board">
        <div class="title">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">

            </div>
        </div>
        <div class="main">
            <div class="main-title">
                <div class="main-title-content">
                    <span>街道</span>
                    <span>长者数</span>
                    <span>点名数</span>
                    <span>完成率</span>
                </div>
            </div>
            <div class="chart">
                <dv-scroll-board :config="config" style="width:100%;height:100%"/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'MyScrollBoard',
    data() {
        return {
            config: {},
            itemData: null,
            form: {
                title: 'AI点名',
                dataList: []
            }
        }
    },
    mounted() {
        this.getList()
        this.timer = setInterval(this.getList, 10000)
    },

    beforeDestroy() {
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        getList() {
            let daysArray = ['中三街道', '佘山镇', '松江工业区', '九亭镇', '小昆山镇', '永丰街道', '洞泾镇', '岳阳街道', '新桥镇', '新浜镇', '石湖荡镇']; // 日期数组
            this.form.dataList = [];
            for (let i = 0; i < daysArray.length; i++) {
                let name = daysArray[i];
                let elder_num = Math.floor(Math.random() * 500 + 10); // 生成 10 到 500 之间的随机总数
                let call_num = Math.floor(Math.random() * 500 + 10); // 生成 10 到 500 之间的随机总数
                let over_ratio = Math.floor(Math.random() * 80 + 20); // 生成 20 到 100 之间的随机总数
                this.form.dataList.push({name, elder_num, call_num, over_ratio}); // 添加到数据源
            }
            this.set_scroll_board(this.form.dataList)
        },
        set_scroll_board(rows) {
            let data = []
            if (rows && rows.length > 0) {
                rows.forEach((item, index) => {
                    data.push([
                        '<span style="color: #DCE1E6;; font-weight: bold;font-size: 14px;">' + item.name + '</span>',
                        '<span style="color: #37D6AF; font-weight: bold;font-size: 16px;">' + item.elder_num + '</span>',
                        '<span style="color: #37D6AF; font-weight: bold;font-size: 16px;">' + item.call_num + '</span>',
                        '<span style="color: #37D6AF; font-weight: bold;font-size: 16px;">' + item.over_ratio + '&nbsp;%' + '</span>'
                    ])
                })
            }
            this.config = {
                data: data,
                index: false,
                columnWidth: [130, 100, 100, 100],
                align: ['center', 'left', 'center', 'right'],
                rowNum: 4,
                headerHeight: 45,
                oddRowBGC: 'rgba(0, 44, 81, 0)',
                evenRowBGC: 'rgba(10, 29, 50, 0)'
            }
        },
    }
}
</script>

<style scoped lang="scss">
#scroll-board {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        //border: orange solid 1px;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 9%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
        }
    }

    .main {
        flex: 7;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        //border: #f82007 solid 1px;

        .main-title {
            flex: 1;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            //border: #f43908 solid 1px;
            display: flex;
            justify-content: center;
            align-items: end;

            .main-title-content {
                width: 96%;
                height: 80%;
                //border: #53f408 solid 1px;
                display: flex;
                justify-content: space-around;

                align-items: center;

                background-image: url('/public/img/slices/center_top@2x.png');
                background-size: 100% 100%; /* 背景图片覆盖整个元素 */
                background-repeat: no-repeat; /* 防止背景图片重复 */
                background-position: center center; /* 背景图片居中 */

                span {
                    font-size: 16px;
                    font-weight: bold;
                    color: #37D6AF;
                }

            }
        }

        .chart {
            flex: 4;
            width: 95%;
            height: 100%;
            display: flex;
            justify-content: center;
            //border: #f43908 solid 1px;

            ::v-deep .rows .row-item {
                width: 100%;
                border-bottom: 1px solid #2D3768; /* 设置每行的分割线 */
            }
        }
    }
}
</style>
